<template>
  <!--  -->
  <div class="officemanagement">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/first' }">首页：</el-breadcrumb-item>
      <el-breadcrumb-item>后勤管理</el-breadcrumb-item>
      <el-breadcrumb-item>办公管理</el-breadcrumb-item>
    </el-breadcrumb>
    <br />
    <!-- 头部
          <div class="officemanagementHend">
              <p><strong>位置:</strong>综合管理>办公管理</p>
          </div> -->
    <!-- 内容 -->
    <div class="officemanagementContent">
      <ul>
        <li
          v-for="item in office"
          :key="item.id"
          @click="clicl(item.id)"
          :class="item.id == clicid ? 'cor' : ''"
        >
          {{ item.content }}
        </li>
      </ul>
      <!-- 审批状况 -->
      <div v-show="clicid == 0" class="officemanagementContentOne">
        <!-- 左边 -->
        <div class="officemanagementContentOne_left">
          <p>查找申请</p>
          <!-- 搜索 -->
          <ul>
            <li class="officemanagementContentOne_left_left">员工姓名：</li>
            <li class="officemanagementContentOne_left_right">
              <el-input placeholder="请输入内容" v-model="input1" clearable>
              </el-input>
            </li>
            <li class="officemanagementContentOne_left_left">用品名称：</li>
            <li class="officemanagementContentOne_left_right">
              <el-input placeholder="请输入内容" v-model="input2" clearable>
              </el-input>
            </li>
            <li class="officemanagementContentOne_left_left">审核状态：</li>
            <li class="officemanagementContentOne_left_right">
              <el-select v-model="value" clearable placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </li>
          </ul>
          <p>
            <el-button type="warning" plain @click="selectOffices"
              >查询</el-button
            >
          </p>
          <!-- 渲染办公申请数据 -->
          <el-table
            class="el_table"
            :data="selectOffice"
            height="250"
            border
            style="width: 95%"
          >
            <el-table-column
              class="el_table_column"
              prop="UserName"
              label="员工姓名"
              width="80"
            ></el-table-column>
            <el-table-column
              class="el_table_column"
              prop="ThingName"
              label="用品名称"
              width="80"
            ></el-table-column>
            <el-table-column
              class="el_table_column"
              prop="ThingSum"
              label="数量"
              width="60"
            >
            </el-table-column>
            <el-table-column
              class="el_table_column"
              prop="SQreason"
              label="申请理由"
              width="140"
            >
            </el-table-column>
            <el-table-column
              class="el_table_column"
              prop="OAreason"
              label="审批理由"
              width="140"
            >
            </el-table-column>
            <el-table-column
              class="el_table_column"
              prop="Checker"
              label="审批人"
              width="100"
            >
            </el-table-column>
            <el-table-column
              :style="{ color: '#f00' }"
              class="el_table_column"
              prop="OFStatus"
              label="审批状态"
              width="100"
            >
            </el-table-column>
          </el-table>
          <p class="cont">共{{ cont }}条</p>
        </div>
        <!-- 右边 -->
        <div class="officemanagementContentOne_right">
          <!-- 柱状图 -->
          <ve-histogram
            :data="chartDatas"
            :extend="extend"
            :legend-visible="true"
          ></ve-histogram>
        </div>
      </div>
      <!-- 待审批 -->
      <div v-show="clicid == 1" class="officemanagementContentTwo">
        <div class="officemanagementContentTwo_Head">
          <table>
            <tr>
              <th>员工姓名</th>
              <th>用品名称</th>
              <th>数量</th>
              <th>申请理由</th>
              <th>操作</th>
            </tr>
            <tr v-for="item in selectOffice1" :key="item.Old">
              <td>{{ item.UserName }}</td>
              <td>{{ item.ThingName }}</td>
              <td>{{ item.ThingSum }}</td>
              <td>{{ item.SQreason }}</td>
              <td @click="fnt(item.Old)" :style="{ color: '#f00' }">审核</td>
              <div v-show="fnts" class="officemanagementContentTwo_font">
                <ul v-for="item in selectOffice2" :key="item.Old">
                  <li class="officemanagementContentTwo_font_left">
                    员工姓名：
                  </li>
                  <li class="officemanagementContentTwo_font_right">
                    {{ item.UserName }}
                  </li>
                  <li class="officemanagementContentTwo_font_left">
                    用品名称：
                  </li>
                  <li class="officemanagementContentTwo_font_right">
                    {{ item.ThingName }}
                  </li>
                  <li class="officemanagementContentTwo_font_left">
                    用品数量：
                  </li>
                  <li class="officemanagementContentTwo_font_right">
                    {{ item.ThingSum }}
                  </li>
                  <li class="officemanagementContentTwo_font_left">
                    申请理由：
                  </li>
                  <li class="officemanagementContentTwo_font_right">
                    {{ item.SQreason }}
                  </li>
                  <li class="officemanagementContentTwo_font_left">
                    申请结果：
                  </li>
                  <li class="officemanagementContentTwo_font_right">
                    <select @change="getVal4($event)">
                      <option value="">未审批</option>
                      <option value="同意">同意</option>
                      <option value="驳回">驳回</option>
                    </select>
                  </li>
                  <li class="officemanagementContentTwo_font_left">
                    审批原因：
                  </li>
                  <li class="officemanagementContentTwo_font_right">
                    <input
                      type="text"
                      placeholder="请输入内容"
                      v-model="OAreason"
                    />
                  </li>
                  <li class="officemanagementContentTwo_font_left">审批人：</li>
                  <li class="officemanagementContentTwo_font_right">
                    <input
                      type="text"
                      placeholder="请输入内容"
                      v-model="Checker"
                    />
                  </li>
                </ul>
                <button @click="closes">确认</button>
                <div @click="fnts = false" class="sc">
                  <img src="../assets/sc.png" />
                </div>
              </div>
            </tr>
          </table>
          <div>共{{ cont1 }}条</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vuelines from "v-charts/lib/histogram.common.js";
export default {
  components: {
    Vuelines,
  },
  data() {
    return {
      input1: "", //员工姓名的双向绑定数据
      input2: "", //用品名称的双向绑定数据
      value: "", //审核状态的双向绑定数据
      OAreason: "", //审批原因的双向绑定数据
      Checker: "", //审批人的双向绑定数据
      OFStatus: "", //审批结果的双向绑定数据
      clicid: 0,
      fnts: false,
      fntid: 0,
      office: [
        { id: 0, content: "审批状况" },
        { id: 1, content: "待审批" },
      ],
      options: [
        { value: "同意", label: "同意" },
        { value: "驳回", label: "驳回" },
        { value: "未审批", label: "未审批" },
      ],
      selectOffice: [], //办公用品数据
      selectOffice1: [], //未审批办公用品数据
      selectOffice2: [], //筛选修改的数据
      //柱状图数据
      chartDatas: {
        columns: ["姓名", "钢笔", "办公桌", "办公椅"],
        rows: [
          { 姓名: "张三", 钢笔: 20, 办公桌: 1, 办公椅: 3 },
          { 姓名: "李四", 钢笔: 10, 办公桌: 2, 办公椅: 8 },
          { 姓名: "王五", 钢笔: 30, 办公桌: 1, 办公椅: 2 },
        ],
      },
      extend: {
        // x轴的文字倾斜
        "xAxis.0.axisLabel.rotate": 45,
        yAxis: {
          //是否显示y轴线条
          axisLine: {
            show: true,
          },
          // 纵坐标网格线设置，同理横坐标
          splitLine: {
            show: false,
          },
          // 线条位置
          position: "left",
        },
        xAxis: {
          axisLine: {
            show: true,
          },
        },
        series: {
          label: { show: true, position: "top" },
        },
        //数据过多时出现横向滚动条
        dataZoom: [
          {
            show: true,
            realtime: true,
            start: 0,
            end: 50,
          },
          {
            type: "inside",
            realtime: true,
            start: 0,
            end: 50,
          },
        ],
      },
    };
  },
  methods: {
    //控制待审核和审批状况的节流阀
    clicl(id) {
      this.clicid = id;
    },
    //调用修改的接口
    closes() {
      console.log(this.fnts);
      if (this.OFStatus != "" && this.OAreason != "" && this.Checker) {
        this.$axios({
          url: "http://localhost:9090/updateOffice",
          method: "post", //post请求方式
          data: {
            carobj: {
              OFStatus: this.OFStatus,
              OAreason: this.OAreason,
              Checker: this.Checker,
              Old: this.fntid,
            },
          },
        }).then((res) => {
          // this.selectOffice=res.data.data
          // console.log(this.selectOffice);
          // this.chartData.rows=res.data.data
        });
        this.SelectOffices1();
      }
      this.fnts = false;
    },
    fnt(id) {
      this.fnts = true;
      this.fntid = id;
      //筛选修改的数据
      this.selectOffice2 = this.selectOffice1.filter((item) => {
        return this.fntid == item.Old;
      });
      // console.log(this.fnts,this.fntid);
      // console.log(this.selectOffice2);
    },
    //  拿到申请结果的数据
    getVal4(e) {
      // console.log(e.target.value);
      this.OFStatus = e.target.value;
    },
    //筛选办公用品的接口
    selectOffices() {
      this.$axios({
        url: "http://localhost:9090/selectOffice",
        method: "post", //post请求方式
        data: {
          carobj: {
            UserName: this.input1,
            ThingName: this.input2,
            OFStatus: this.value,
          },
        },
      }).then((res) => {
        this.selectOffice = res.data.data;
        // console.log(this.selectOffice);
        // this.chartData.rows=res.data.data
      });
    },
    //获取数据的接口
    SelectOffices1() {
      // 拿办公用品数据
      this.$axios({
        url: "http://localhost:9090/selectOffice",
        method: "post", //post请求方式
        data: {
          carobj: {
            UserName: "",
            ThingName: "",
            OFStatus: "",
          },
        },
      }).then((res) => {
        this.selectOffice = res.data.data;
        //  console.log(this.selectOffice);
        //筛选未审批的数据
        this.selectOffice1 = this.selectOffice.filter((item) => {
          return item.OFStatus == "未审批";
        });

        // console.log(this.selectOffice);
        // console.log(this.selectOffice1);
      });
    },
  },
  // 生命周期挂载后
  mounted() {
    this.SelectOffices1();
  },
  // 计算属性
  computed: {
    cont() {
      return this.selectOffice.length;
    },
    cont1() {
      return this.selectOffice1.length;
    },
  },
};
</script>

<style >
.officemanagement {
  width: 99%;
  height: 100%;
  background: #fff;
  padding: 20px 0 0 10px;
  /* border: 1px solid #f00; */
}
/* 内容 */
.officemanagementContent > ul {
  width: 100%;
  height: 90%;
  overflow: hidden;
  text-align: left;
}
.officemanagementContent > ul > li {
  width: 10%;
  height: 34px;
  list-style: none;
  margin: 10px 20px;
  border-radius: 7px;
  line-height: 34px;
  text-align: center;
  background: rgb(253, 246, 236);
  float: left;
  /* border: 1px solid #f00; */
}
.officemanagementContent > ul > li:hover {
  background: rgb(230, 162, 60);
  color: #fff;
}
/* 审批状况 */
.officemanagementContentOne {
  width: 100%;
  height: 88%;
  /* border: 1px solid #f00;  */
  overflow: hidden;
}
/* 内容左边 */
.officemanagementContentOne_left {
  width: 60%;
  height: 90%;
  float: left;
  /* border: 1px solid #f00;  */
}
.officemanagementContentOne_left > p {
  height: 28px;
  line-height: 28px;
  margin: 5px 0 0 0;
  /* background:rgb(222, 227, 229); */
  /* border: 1px solid #f00;  */
}
.officemanagementContentOne_left > ul {
  width: 100%;
  list-style: none;
  overflow: hidden;
}
.officemanagementContentOne_left > ul > li {
  width: 16.5%;
  height: 42px;
  line-height: 42px;
  /* border: 1px solid #f00; */
  float: left;
}
.officemanagementContentOne_left_left {
  text-align: right;
  font-size: 14px;
}
.officemanagementContentOne_left_right {
  text-align: left;
}
.el_table {
  margin: 20px 0 0 30px;
}
.el_table_column {
  text-align: center;
  color: #f00;
}
.cont {
  text-align: right;
  font-size: 14px;
}
/* 右边内容 */
.officemanagementContentOne_right {
  width: 40%;
  float: left;
}
/*待审批 */
.officemanagementContentTwo {
  width: 100%;
  height: 90%;
  /* border: 1px solid #0f0; */
  position: relative;
}
.officemanagementContentTwo_Head {
  width: 100%;
  height: 200px;
  /* border: 1px solid #f00; */
}
.officemanagementContentTwo_Head > table {
  width: 100%;
  margin: 20px 0 0 0;
  /* border: 1px solid #f00; */
}
.officemanagementContentTwo_Head > table > tr {
  height: 30px;
  font-size: 12px;
  line-height: 30px;
  text-align: center;
}
.officemanagementContentTwo_Head > table > tr:hover {
  background: rgb(218, 210, 210);
}
/* 审核操作 */
.officemanagementContentTwo_font {
  width: 40%;
  height: 300px;
  background: rgba(232, 239, 243, 0.7);
  border-radius: 10px;
  position: absolute;
  top: 0px;
  left: 350px;
}

.officemanagementContentTwo_font > ul {
  width: 100%;
  margin: 20px 0 0 0;
  list-style: none;
  overflow: hidden;
  /* border: 1px solid #f00; */
}
.officemanagementContentTwo_font > ul > li {
  width: 49%;
  height: 32px;
  line-height: 32px;
}
.officemanagementContentTwo_font > button {
  width: 100px;
  height: 40px;
  line-height: 40px;
  border-radius: 8px;
  border: none;
  background: rgb(253, 246, 236);
}
.officemanagementContentTwo_font > button:hover {
  background: rgb(230, 162, 60);
}
.sc {
  width: 30px;
  position: absolute;
  top: 2px;
  left: 500px;
}
.sc > img {
  width: 20px;
}
.officemanagementContentTwo_font_left {
  text-align: right;
  float: left;
}
.officemanagementContentTwo_font_right {
  text-align: left;
  float: right;
}
.officemanagementContentTwo_font > ul > li > input {
  width: 40%;
  height: 30px;
  font-size: 10px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  outline: none;
  border-radius: 6px;
}
.officemanagementContentTwo_font > ul > li > input:hover {
  border: 1px solid rgb(230, 162, 60);
}
.officemanagementContentTwo_font > ul > li > select:hover {
  border: 1px solid rgb(230, 162, 60);
}
.officemanagementContentTwo_font > ul > li > select {
  width: 30%;
  height: 30px;
  font-size: 10px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  outline: none;
  border-radius: 8px;
}
.officemanagementContentTwo_font > ul > li > select > option {
  width: 100%;
  height: 30px;
  border-radius: 6px;
}

/* 调用样式 */
.cor {
  background: rgb(230, 162, 60) !important;
  font-weight: 700;
}
</style>